<template>
	<view class="content">
		<!-- 支付金额 -->
		<view class="pay_amount">
			<text>支付金额：</text>
			<text>￥{{amount}}</text>
			<text>扫描下方二维码即刻进行支付</text>
		</view>
		<!-- 支付二维码 -->
		<view class="pay_ewm">
			<image :src='alipayCodeImg'></image>
		</view>
		<!-- 底部支付 保存 -->
		<view class="pay_foo">
			<view class="foo_zf" @click="goPayDetails">
				<image :src="imgUrl+'/static/wap/img/wan@2x.png'"></image>
				<text>支付完成</text>
			</view>
			<view class="foo_bc" @click="saveImg">
				<image :src="imgUrl+'/static/wap/img/xai@2x.png'"></image>
				<text>保存二维码</text>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '../../static/util.js'
	export default {
		data() {
			return {
				imgUrl: util.globalData.imgPre,
				orderNo: '',
				amount: '',
				alipayCodeImg: '',
				// 支付完成
				payCompleted: false,
				setTime: '',
				id:''

			}
		},
		onLoad(openid) {
			this.amount = openid.amount
			this.orderNo = openid.orderNo
		},
		mounted() {
			// this.getOrderStatus()
			this.alipayCode()
		},
		methods: {
			// 获取支付二维码
			alipayCode() {
				let that = this
				that.ajax({
					url: 'api/payment_order/alipay_code',
					method: 'POST',
					data: {
						orderNo: that.orderNo
					},
					success: function(res) {
						if (res.code == 200) {
							that.alipayCodeImg = 'https://nengyuan.chuangxiangdianli.com/' + res.data.alipay_qr_code
							that.orderNo = res.data.orderNo
							// 轮询检测是否支付成功 
							if (!that.payCompleted) {
								that.setTime = setInterval(() => {
									that.getOrderStatus(res.data.orderNo)
								}, 1000)
							} else {
								clearInterval(that.setTime)
							}
						}
					},
					fail: function(err) {
						console.log(err)
					}
				})
			},
			getOrderStatus(orderNo) {
				let that = this
				that.ajax({
					url: 'api/payment_order/getOrderStatus',
					method: 'POST',
					data: {
						orderNo
					},
					success: function(res) {  
						that.id = res.data.id
						if (res.data.status == 2) { 
							// 付款成功
							that.payCompleted = true
						}
					},
					fail: function(err) {
						console.log(err)
					}
				})
			},
			goPayDetails() {
				if (this.payCompleted) { 
					uni.navigateTo({
						url: `../payDetails/payDetails?id=${this.id}`
					})
				}else{
					uni.showToast({
						title: '请完成支付',
						icon:'none'  
					})
				}
			},
			// 保存图片
			saveImg() {
				uni.getImageInfo({
					src: this.alipayCodeImg,
					success: function(image) { 
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success: function() { 
								uni.showToast({
									title: '图片保存成功',
									icon: 'none',
									duration: 200
								});
							}
						});
					}
				});
			}
		},
		onUnload(){ 
			clearInterval(this.setTime)  
		}
	}
</script>

<style lang="less" scoped>
	.content {
		overflow: hidden;
	}

	.pay_amount {
		margin-top: 40rpx;
		height: 270rpx;
		line-height: 120rpx;
		text-align: center;
		font-size: 48rpx;
		color: #333;

		& text:nth-child(2) {
			color: #F99600;
		}

		& text:nth-child(3) {
			font-size: 36rpx;
			color: #666;
			display: block;
		}
	}

	.pay_ewm {
		margin: 0 auto;
		padding-top: 50rpx;
		width: 579rpx;
		height: 579rpx;
		background: url(https://nengyuan.chuangxiangdianli.com/static/wap/img/bg@2x.png) no-repeat;
		background-size: 100% 100%;

		image {
			display: block;
			margin: 0 auto;
			height: 90%;
			width: 90%;
		}
	}

	.pay_foo {
		display: flex;
		margin: 0 24rpx;
		height: 180rpx;
		color: #fff;
		font-size: 30rpx;
		line-height: 180rpx;

		view {
			flex: 1;
			text-align: center;

			image {
				margin-right: 20rpx;
				width: 36rpx;
				height: 36rpx;
			}
		}

		.foo_zf {
			background: url(https://nengyuan.chuangxiangdianli.com/static/wap/img/bu_l@2x.png) no-repeat;
			background-size: 100% 100%;
		}

		.foo_bc {
			background: url(https://nengyuan.chuangxiangdianli.com/static/wap/img/bu_r@2x.png) no-repeat;
			background-size: 100% 100%;
			color: #999;
		}
	}
</style>
